<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {useRouter} from "vue-router";
import {Download} from "@element-plus/icons-vue";
import {getCertificateTypeListApi, getStuListApi} from "@/api/school.js";

const {proxy} = getCurrentInstance();

const router = useRouter()
const state = reactive({
  form: {},
  total: 0,
  tableData: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    stuName: '',
    stuFaculties: '',
    stuPhone: '',
    stuPlace: '',
  },
});

const selectable = (row) => ![1, 2].includes(row.id)

const showDia1 = ref(false)

const handleAdd = () => {
  showDia1.value = true
}

const handleUploadSuccess = (response, file, fileList) => {
  console.log(response, file, fileList)
}

const handleEdit = (url, row) => {

  const query = {
    id: row.id,
    stuId: row.id
  }

  if(url === 'comprehensiveIn/sixTwoOneOne'){
    query.type = 1
  }else if(url === 'comprehensiveIn/ieAchievement'){
    query.type = 2
  }


  router.push({
    path: url,
    query
  })
}

const getDataList = async () => {
  const res = await getStuListApi(state.queryParams)
  if (res.code == 200) {
    state.tableData = res.rows
    state.total = res.total
  }
}

const resetSearch = () => {
  proxy.resetForm("queryRef");
  state.queryParams = {
    pageNum: 1,
    pageSize: 10,
  }
  getDataList()
}


onMounted(() => {
  getDataList()
})

</script>

<template>
  <div class="outBox">
    <CardBox style="margin-bottom: 20px" title="筛选查询">
      <template #btn-cont>
        <el-button type="primary" @click="getDataList">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </template>
      <template #content>
        <el-form :model="state.queryParams" label-width="auto" inline="true">
          <el-form-item label="姓名">
            <el-input v-model="state.queryParams.stuName"/>
          </el-form-item>
          <el-form-item label="院系">
            <el-input v-model="state.queryParams.stuFaculties"/>
          </el-form-item>
          <el-form-item label="户籍地">
            <el-input v-model="state.queryParams.stuPlace"/>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="state.queryParams.stuPhone"/>
          </el-form-item>
        </el-form>
      </template>
    </CardBox>
    <CardBox title="数据列表">
      <template #btn-cont>
        <el-button type="primary">
          <el-icon>
            <Download/>
          </el-icon>
          <span>导出</span>
        </el-button>
      </template>
      <template #content>
        <el-table :data="state.tableData" style="width: 100%">
          <!--          <el-table-column type="selection" :selectable="selectable" width="55"/>-->
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="stuName" width="80" label="姓名" align="center"/>
          <el-table-column prop="stuFaculties" width="100" label="院系" align="center"/>
          <el-table-column prop="stuClass" width="100" label="班级" align="center"/>
          <el-table-column prop="stuNum" width="150" label="学号" align="center"/>
          <el-table-column prop="stuGradYear" width="80" label="毕业年份" align="center"/>
          <el-table-column prop="stuPhone" width="150" label="联系电话" align="center"/>
          <el-table-column prop="stuPlace" width="180" label="户籍地" align="center"/>
          <el-table-column prop="h" width="" label="学习档案" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link
                         @click="handleEdit('learningFiles3', scope.row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="h" label="实战展示" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link
                         @click="handleEdit('comprehensiveIn/practicalResults', scope.row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="h" label="见习/实习经历" align="center" width="120">
            <template #default="scope">
              <el-button type="primary" size="small" link
                         @click="handleEdit('comprehensiveIn/InternshipExperience',scope.row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="h" label="6211" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link @click="handleEdit('comprehensiveIn/sixTwoOneOne',scope.row)">查看详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="h" label="证书展示" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link
                         @click="handleEdit('comprehensiveIn/certificateDisplay', scope.row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="h" label="智育成绩" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link @click="handleEdit('comprehensiveIn/ieAchievement',scope.row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pageBox">
          <pagination
              v-show="state.total > 0"
              :total="state.total"
              v-model:page="state.queryParams.pageNum"
              v-model:limit="state.queryParams.pageSize"
              @pagination="getDataList"
          />
        </div>
      </template>
    </CardBox>
  </div>
</template>

<style scoped lang="scss">

</style>
